<template>
   <div class="seatmap" ref="seatmaps">
     <div
     v-for="seat in item.hallSeatMap"
     :key="seat.id" :class= "[ seat.isSeat ? 'seat' : 'notseat' ]"
     :style="{width:seatSize,height:seatSize}"
     @click='seatClick(seat.id)'
     @dblclick="deleterow(seat.id)">
       <div class="icon"></div>
     </div>
   </div>
</template>

<script>
export default {
  name: 'seatmap',
  data () {
    return {
      // 表达座位地图是否可用编辑
      canEdit: false,
      // 设置一个定时器用于区分单击和双击
      timer: null
    }
  },
  props: {
    // 当前seatmap的数据
    item: {
      type: Object,
      default () {
        return {}
      }
    },
    activeName: {
      type: String,
      default: '0'
    },
    seatMapWidth: {
      type: Number,
      default: 0
    },
    seatSize: {
      type: String,
      default: ''
    },
    isEditSeatMap: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    isEditSeatMap (val) {
      if (this.activeName === this.item.hallId) {
        console.log(`编辑按钮点击了，当前值${val}，点击的是${this.item.hallName}`)
      }
    }
  },
  methods: {
    // 单个座位点击要可以切换是否是座位或者空格
    seatClick (id) {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        // 将座位id分割出来，然后计算成当前列表中位于第几个
        let num = parseInt(id.split('-')[0]) * this.item.hallWidth + parseInt(id.split('-')[1])
        // 更改这个座位的标识符
        if (this.isEditSeatMap === true && this.activeName === this.item.hallId) {
          console.log(id, this.item.hallWidth)
          this.item.hallSeatMap[num].isSeat = !this.item.hallSeatMap[num].isSeat
        }
      }, 300)
    },
    // 将整行的座位都设为空
    deleterow (id) {
      clearTimeout(this.timer)
      // console.log(parseInt(id.split('-')[0]))
      let row = parseInt(id.split('-')[0])
      let index = parseInt(id.split('-')[1])
      let num = parseInt(id.split('-')[0]) * this.item.hallWidth + parseInt(id.split('-')[1])
      // 这里可以得到我们点击的是第几行的第几个元素
      if (this.isEditSeatMap === true && this.activeName === this.item.hallId) {
        // 两个false之间的座位在点击之后全部设为false
        if (index === 0 || index === this.item.hallWidth - 1) {
          // 点击的这个座位号在0或者最后一个
          console.log('first和last的情况')
          for (let i = row * this.item.hallWidth; i < (row + 1) * this.item.hallWidth; i++) {
            this.item.hallSeatMap[i].isSeat = false
          }
        } else {
          // 这个座位号位于中间的情况
          // 从这个点击的座位出发，向左向右遍历，如果左右存在false的座位就跳出循环，没有就把整行循环完
          // 向左
          console.log(num)
          console.log((row) * this.item.hallWidth)
          for (let i = num; i >= row * this.item.hallWidth; i--) {
            console.log('向左')
            if (this.item.hallSeatMap[i].isSeat === false) {
              break
            } else {
              this.item.hallSeatMap[i].isSeat = false
            }
          }
          // 向右
          console.log(num)
          console.log((row + 1) * this.item.hallWidth)
          for (let i = num + 1; i < (row + 1) * this.item.hallWidth; i++) {
            console.log(i)
            if (this.item.hallSeatMap[i].isSeat === false) {
              break
            } else {
              this.item.hallSeatMap[i].isSeat = false
            }
          }
        }
      }
    }
  }
}
</script>

<style lang='stylus' scoped>
.seatmap
  font-size 0
  box-sizing border-box
  .seat
    display inline-block
    padding 2px
    .icon
      width 100%
      height 100%
      background-color pink
  .notseat
    opacity 0.5
    display inline-block
</style>
